let domain='https://www.gangerp.com';
// let domain='https://dev.gangerp.com'

var wrapper=document.querySelector('.wrapper');
var canvas=document.querySelector('#canvas');
var compose=document.querySelector('#compose');
// var cropperCanvas=document.querySelector('#cropperCanvas');


var btn=document.querySelector('.btn');
var large=document.querySelector('.large');
var small=document.querySelector('.small');
var move=document.querySelector('.move');
var pen=document.querySelector('.pen');
var rubber=document.querySelector('.rubber');
var copy=document.querySelector('.copy');
var home=document.querySelector('.home');

var penList_wrapper=document.querySelector('.penList_wrapper');
var rubberList_wrapper=document.querySelector('.rubberList_wrapper');

var layer=document.querySelector('.layer');
var layerLoading=document.querySelector('.layer-loading');
var layerMessage=document.querySelector('.layer-message');

var penSize='';//笔画的大小
var rubberSize='';//橡皮的大小


export class paintPro{
    constructor(src,index){
        this.copyFlag=true;//避免重复点击
        this.transformOrigin={x:'50',y:'50'};//双指缩放时候的变换点
        this.src=src;
        this.imgIndex=index;//小程序传来的图片索引
        this.img='';//图片的dom
        this.imgStyle={
            //图片的原始大小
            naturalWidth:'',
            naturalWidth:'',

            //显示的大小
            height:'',
            width:'',
            //初始的距离
            offsetTop:0,
            offsetLeft:0,
            windowInnerWidth:'',
            windowInnerHeight:''
        }
        this.trans={
            startX:'',//手指触碰初始x位置
            startY:'',//手指触碰初始y位置
            scale:1,
            lastTransX:'',//上一次的移动位置
            lastTransY:'',
            nowTransX:0,//目前的偏移位置
            nowTransY:0,
            lastOffSetX:'',//最后一刻的偏移X
            lastOffSetY:''
        }

        this.canvasStyle={
            //初始化后canvas的大小
            width:'',
            height:''
        };
        this.touches='';//2只手指的触碰点
        this.isTouch=false;//触碰屏幕时候是2只手指的状态
        this.rubberFlag=false;//true的时候为橡皮檫激活状态

        this.lastClickIcon='';//上次点击的底部按钮

        window.Paint=this
        this.init()
    }

    convertImgToBase64(url, callback, outputFormat){//转化为base64
        var somecanvas = document.createElement('CANVAS'),
        ctx = somecanvas.getContext('2d'),
        img1 = new Image();
        img1.setAttribute("crossOrigin",'Anonymous');
        img1.onload = function(){
            somecanvas.height = img1.height;
            somecanvas.width = img1.width;
            ctx.drawImage(img1,0,0);
            var dataURL = somecanvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            somecanvas = null; 
        };
        img1.src = url;

        }

    checkUserAgent(){
        //判断是安卓还是ios
        
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
            return 'isAndroid'
        }else if(isiOS){
            return 'isiOS'
        }
    }
    init(){
        const img=new Image();
        this.imgStyle.windowInnerWidth=window.innerWidth;
        this.imgStyle.windowInnerHeight=window.innerHeight;

        const that=this;
        // img.src=this.src+ "?v=" + new Date().getTime();
        // img.setAttribute("crossOrigin",'Anonymous');
        var judge=that.checkUserAgent();
        console.log(judge)
        if(judge=='isiOS'){
            try {
                let src=that.src+ "?v=" + new Date().getTime();
                var xhr = new XMLHttpRequest();
                xhr.open('GET', src);
                xhr.onprogress = function (event) {
                    if (event.lengthComputable) {
                        let precent=(event.loaded / event.total) * 100;
                        that.layerDownload(`图片加载中...${Math.round(precent)}%`)
                    }
                };
                
                xhr.send();
                xhr.onload=function(data){
                    // img.src=data.target.responseURL
                    
                    that.convertImgToBase64(that.src,function(base64Img){
                        img.src=base64Img
                    })

                }
            } catch (error) {
                that.convertImgToBase64(that.src,function(base64Img){
                    img.src=base64Img
                })
            }
        }else if(judge=='isAndroid'){
            that.layerDownload(`图片加载中...`)
            img.src=that.src+ "?v=" + new Date().getTime();
             img.setAttribute("crossOrigin",'Anonymous');
        }else{
            //兼容获取不了userAgent的情况
            that.layerDownload(`识别失败`)
        }
        // this.convertImgToBase64(this.src,function(base64Img){
        //     img.src=base64Img
        // })
        this.penState_moveFlag='';//涂鸦的笔画大小拖动的标记
        
        img.onload=function(){
            that.layerHide();
            wrapper.insertBefore(img,canvas)
            const res=that.scale(img.width,img.height,window.innerWidth,window.innerHeight);
            if(res[0]<window.innerWidth){
                //图片过小，使图片宽度与屏幕一直，避免缩放时候，位置偏移，无法计算准确
                res[0]=window.innerWidth;
                res[1]=window.innerWidth/img.naturalWidth*img.naturalHeight
            }
            //原始的图片大小
            that.imgStyle.naturalWidth=img.naturalWidth;
            that.imgStyle.naturalHeight=img.naturalHeight;
            that.imgStyle.width=res[0];
            that.imgStyle.initWidth=res[0];
            that.imgStyle.initHeight=res[1];
            // 图片的显示大小
            that.imgStyle.height=res[1];

            const h=`${res[1]}px`;
            const w=`${res[0]}px`
            //初始化图片和canvas大小

            that.canvasStyle.height=res[1];
            that.canvasStyle.width=res[0];
            wrapper.style.width=`${res[0]}px`;
            wrapper.style.height=`${res[1]}px`

            img.style.height=h;
            img.style.width=w;
            img.style.position='absolute';

            //使wrapper居中，获取初始的offset
            if(res[1]<window.innerHeight){
                wrapper.style.marginTop=`${-res[1]/2}px`;
                wrapper.style.top='50%'
            }


            if(res[0]<window.innerWidth){
                wrapper.style.marginLeft=`${-res[0]/2}px`;
                wrapper.style.left='50%'
            }
            that.imgStyle.offsetTop=wrapper.offsetTop;
            that.imgStyle.offsetLeft=wrapper.offsetLeft;
            

            //用户可见的canvas
            canvas.height=res[1];
            canvas.width=res[0];
            that.ctx=canvas.getContext("2d");
            that.wrapper_inital_offsetTop=wrapper.offsetTop;//距屏幕顶端的距离，用于矫正坐标

            //合成图片的canvas

            compose.height=img.naturalHeight;
            compose.width=img.naturalWidth;
            that.composeCtx=compose.getContext("2d");
            // that.composeCtx.drawImage(img,0,0);

            that.getTouchByMove();//注册拖动
            that.flag='move';
            // that.getTouchByPen();//注册画图

            that.moveState();//注册移动事件
            that.penState();//注册画笔事件
            that.fingerScale();//注册双指缩放事件
            that.rubberState();//注册橡皮檫事件
            that.copyState();//注册合成图片事件
            that.homeState();//注册返回事件
            that.img=img;

            // wrapper.style.transform="rotate(360deg)"
            // new Cropper(img)
        }
        
        
    }

    // 递归大法好
    scale(w, h, maxW, maxH) {
        const that=this;
        if (w > maxW) {
            return that.scale(maxW, h / (w / maxW), maxW, maxH);
        }
        if (h > maxH) {
            return that.scale(w / (h / maxH), maxH, maxW, maxH);
        }
        return [w, h];
    }

    //移动事件的移除或添加
    moveState(){
        move.addEventListener('touchstart',e=>{
                this.flag='move';
                this.removeTouchByPen();
                this.getTouchByMove();
                this.toggleStyle(move)
        })
    }

    //涂鸦事件的移除或添加
    penState(){
        pen.addEventListener('touchstart',e=>{

            this.rubberFlag=false;
            this.flag='paint';
            this.removeTouchByMove();
            this.getTouchByPen();
            this.toggleStyle(pen)
        })
    }

    rubberState(){
        //注册橡皮檫事件
        rubber.addEventListener('touchend',e=>{
            console.log('在用橡皮')
            this.rubberFlag=true;
            this.flag='paint';
            this.removeTouchByMove();
            this.getTouchByPen();
            this.toggleStyle(rubber)
        })
    }

    toggleStyle(type){
        //图标的显示状态;
        const imgs=type.querySelectorAll('img');
        const imgs_all=btn.querySelectorAll('img');
        this.penList_show(type);
        this.rubberList_show(type);
        if(this.lastClickIcon==type){
            return
        }
        if(this.lastClickIcon &&type!=this.lastClickIcon){
            const lastImgs=this.lastClickIcon.querySelectorAll('img');
            lastImgs.forEach((item,index,arr)=>{
                arr[0].classList.add('active');
                arr[0].classList.remove('disActive');

                arr[1].classList.add('disActive');
                arr[1].classList.remove('active');
            })
        }
        imgs.forEach(item=>{
            item.classList.toggle('active');
            item.classList.toggle('disActive')
        })
        this.lastClickIcon=type;
        
    }

    penList_show(type){
        //显示画笔粗细的选项栏
        if(type!=pen){
            penList_wrapper.style.bottom='0'
        }else{
            penList_wrapper.style.bottom='60px'
        }
    }

    rubberList_show(type){
        //显示橡皮粗细的选项栏
        if(type!=rubber){
            rubberList_wrapper.style.bottom='0'
        }else{
            
            rubberList_wrapper.style.bottom='60px'
        }
    }
    hideBar(){
        //涂鸦或拖动时候隐藏笔画大小和橡皮大小
        penList_wrapper.style.bottom='0';
        rubberList_wrapper.style.bottom='0'
    }

    copyState(){
        //注册合成图片事件
        copy.addEventListener('touchend',e=>{
            if(this.copyFlag=true){
                this.copyFlag=false;
                this.copy();
                setTimeout(()=>{
                    this.copyFlag=true;
                },1500)
            }
            
        })
    }

    homeState(){
        home.addEventListener('touchend',e=>{
            this.home()
        })
    }

    checkScale(scale){
        //限制缩放大小
        if(scale>0.5 && scale<3){
            this.trans.scale=Math.floor(scale*100)/100
        }
    }
    twoFingerMove(){
        //双指缩放时候，移除涂鸦事件
        if(this.flag=='paint'){
            this.flag='move';
        this.removeTouchByPen();
        this.getTouchByMove();
        this.toggleStyle(move)
        }
    }

    fingerScale(){
        //注册双指缩放事件
        const that=this
        wrapper.addEventListener("touchstart",e=>{
            e.preventDefault();
            // Paint.trans.lastOffSetX=Paint.trans.nowTransX;
            // Paint.trans.lastOffSetY=Paint.trans.nowTransY;
            
            if(e.touches.length>=2){  //判断是否有两个点在屏幕上
                this.istouch=true;
                Paint.trans.lastOffSetX=Paint.trans.nowTransX;
                Paint.trans.lastOffSetY=Paint.trans.nowTransY;
                this.initDistance=this.getDistance(e.touches[0],e.touches[1]);//获取第一次触碰时候2指见的距离

                let dot1=this.correctPoint(e.touches[0].clientX,e.touches[0].clientY);
                let dot2=this.correctPoint(e.touches[1].clientX,e.touches[1].clientY);//矫正触碰点在图片上的位置

                let dotX=Math.abs((dot1.x+dot2.x)/2/this.imgStyle.width)*100;//算出百分比
                let dotY=Math.abs((dot1.y+dot2.y)/2/this.imgStyle.height)*100;

                this.transformOrigin={x:dotX.toFixed(2),y:dotY.toFixed(2)};
                wrapper.style.transformOrigin=`${this.transformOrigin.x}% ${this.transformOrigin.y}%`;
            };
        },false);

        wrapper.addEventListener("touchmove",e=>{
            e.preventDefault();
            if(e.touches.length>=2&&this.istouch){
                this.twoFingerMove()
                const nowDistance=this.getDistance(e.touches[0],e.touches[1]);//获取移动中2指见的距离
                let present='';//缩放的百分比
                if(this.initDistance<nowDistance){
                    //放大
                    this.checkScale((this.trans.scale+0.05))
                }else{
                    //缩小
                    this.checkScale((this.trans.scale-0.05))
                }
                this.transPaint()
            };
        },false);

        wrapper.addEventListener('touchend',e=>{
            e.preventDefault();
            this.istouch=false;
        })

    }
    
    getDistance(p1, p2) {
        //勾股定理
        var x = p2.pageX - p1.pageX,
            y = p2.pageY - p1.pageY;
        return Math.sqrt((x * x) + (y * y));
    }

    getTouchByMove(){
        //获取触碰点 进行拖动
        wrapper.addEventListener('touchstart',this.dragStart)


        wrapper.addEventListener('touchmove',this.dragMove)

        wrapper.addEventListener('touchend',this.dragEnd)

        //点击放大缩小
        large.addEventListener('touchstart',e=>{
            e.preventDefault();
            this.checkScale((this.trans.scale+0.1))
            this.transPaint()
        })

        //点击缩小
        small.addEventListener('touchstart',e=>{
            e.preventDefault();
   
            this.checkScale((this.trans.scale-0.1))
            this.transPaint()
        })
    }  
    
    removeTouchByMove(){

         //获取触碰点 移除拖动

         //保存移动最后一刻的偏移
         Paint.trans.lastOffSetX=Paint.trans.nowTransX;
         Paint.trans.lastOffSetY=Paint.trans.nowTransY;

         wrapper.removeEventListener('touchstart',this.dragStart)


         wrapper.removeEventListener('touchmove',this.dragMove)
 
         wrapper.removeEventListener('touchend',this.dragEnd)
    }

    // 拖动开始的回调函数
    dragStart(e){
        e.preventDefault();
        Paint.hideBar();
        const fingerX=e.touches[0].clientX;
        const fingerY=e.touches[0].clientY;
        Paint.trans.startX=fingerX;
        Paint.trans.startY=fingerY;
    }

    //拖动中的回调函数
    dragMove(e){
        e.preventDefault();
        // console.log(e)
        const fingerX=e.touches[0].clientX;
        const fingerY=e.touches[0].clientY;
        const transX=fingerX-Paint.trans.startX;
        const transY=fingerY- Paint.trans.startY;
        
        
        Paint.transPaint(transX,transY);
        
    }

    //拖动结束的回调函数
    dragEnd(e){
        e.preventDefault();

            Paint.trans.lastTransX=Paint.trans.nowTransX;
            Paint.trans.lastTransY=Paint.trans.nowTransY;
    }

    //画布的缩放，平移
    transPaint(x=0,y=0){
        this.trans.nowTransX=`${x+ +this.trans.lastTransX}`;
        this.trans.nowTransY=`${y+ +this.trans.lastTransY}`;
        
        // if($('.wrapper').height()<screen.height){
        //     //图片高度低于屏幕高度，不给上下拖动
        //     this.trans.nowTransY=0
        // }
        if(this.trans.nowTransX>$('.wrapper').width()/2){
            //左偏移
            this.trans.nowTransX=$('.wrapper').width()/2
        }
        if(this.trans.nowTransX<0 &&Math.abs(this.trans.nowTransX)>$('.wrapper').width()/2){
            //右偏移
            this.trans.nowTransX=-$('.wrapper').width()/2
        }

        
        if(this.trans.nowTransY>($('.wrapper').height()/2)){
            //上偏移
            this.trans.nowTransY=($('.wrapper').height()/2)
        }
        if(this.trans.nowTransY<0 &&Math.abs(this.trans.nowTransY)>$('.wrapper').height()/2){
            //下偏移
            this.trans.nowTransY=-$('.wrapper').height()/2
        }


        const trans=`translate3d(${this.trans.nowTransX}px,${this.trans.nowTransY}px,0px)`;//偏移
        const scales=`scale(${this.trans.scale},${this.trans.scale})`;//缩放

        wrapper.style.transform=`${trans} ${scales}`;

    }

    cleanPen(x, y) {
        //圆形的擦走画笔
        //利用计算圆周率时的方法，将整个圆切成一个一个细小的正方形
        function clearArc(x, y, radius) {
            //圆心(x,y)，半径radius
            radius= rubberSize ||10
            for(let i=0; i<=radius; i++){
                var calcWidth = radius - i;
                var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

                var posX = x - calcWidth;
                var posY = y - calcHeight;

                var widthX = 2 * calcWidth;
                var heightY = 2 * calcHeight;

                Paint.ctx.clearRect(posX, posY, widthX, heightY);
            }
        }

        clearArc(x, y);

        
        
    }

    //画图
    getTouchByPen(){
        wrapper.addEventListener('touchstart',this.paintStart)


        wrapper.addEventListener('touchmove',this.paintMove)

        wrapper.addEventListener('touchend',this.paintEnd)
    }

    //移除画图
    removeTouchByPen(){
        wrapper.removeEventListener('touchstart',this.paintStart)


        wrapper.removeEventListener('touchmove',this.paintMove)

        wrapper.removeEventListener('touchend',this.paintEnd)
    }

    //画图开始的回调
    paintStart(e){
        e.preventDefault();
        Paint.hideBar();
        Paint.ctx.lineWidth=penSize ||5;//画笔大小
        Paint.ctx.beginPath();
        const fingerX=e.touches[0].clientX;
        const fingerY=e.touches[0].clientY;
        const crrectPoint=Paint.correctPoint(fingerX,fingerY);//修正坐标
        Paint.ctx.moveTo(crrectPoint.x,crrectPoint.y);

    }

    //画图中的回调
    paintMove(e){
        e.preventDefault();
        
        const fingerX=e.touches[0].clientX;
        const fingerY=e.touches[0].clientY;
        
        const crrectPoint=Paint.correctPoint(fingerX,fingerY);//修正坐标
        if(Paint.rubberFlag){
            Paint.cleanPen(crrectPoint.x,crrectPoint.y);
        }else{
            Paint.ctx.lineTo(crrectPoint.x,crrectPoint.y);
            Paint.ctx.stroke();
        }
        

    }

    //画图结束的回调
    paintEnd(e){
        e.preventDefault();
        const fingerX=e.changedTouches[0].clientX;
        const fingerY=e.changedTouches[0].clientY;

    }

    correctPoint(x,y){
        //矫正移动的位置
        //无偏移缩小
        // wrapper.style.transformOrigin=`0% 0%`

        const transWidth=($('.wrapper').width()-this.imgStyle.width)*this.transformOrigin.x/100;//x轴缩放偏移的位置
        const nowX=parseInt((x+ -this.imgStyle.offsetLeft-this.trans.lastOffSetX)/Paint.trans.scale+transWidth/Paint.trans.scale);

        const transHeight=($('.wrapper').height()-this.imgStyle.height)*this.transformOrigin.y/100;
        const nowY=parseInt((y+ -this.imgStyle.offsetTop-this.trans.lastOffSetY)/Paint.trans.scale+transHeight/Paint.trans.scale);
        
        return {x:nowX,y:nowY}
    }


    //合成为一张照片
    copy(){
        //把涂鸦合并到原始的compose中
        this.layerShow('合成中，请勿重复提交');
        this.composeCtx.drawImage(this.img,0,0);
        // let width=Paint.imgStyle.naturalWidth;
        // let height=Paint.imgStyle.naturalHeight;
        // compose.height=height/2;
        // compose.width=width/2;
        // this.composeCtx.drawImage(this.img,0,0,width,height,0,0,width/2,height/2);
        setTimeout(()=>{
            // this.composeCtx.drawImage(canvas,0,0,Paint.imgStyle.naturalWidth/2,Paint.imgStyle.naturalHeight/2);
            this.composeCtx.drawImage(canvas,0,0,Paint.imgStyle.naturalWidth,Paint.imgStyle.naturalHeight);
        },3000)
        
        setTimeout(()=>{
            var fullQuality = compose.toDataURL("image/jpeg");
            this.sendPic(fullQuality)
        },6000)
        // const img=new Image();
        // img.src=fullQuality;
        // wrapper.appendChild(img)
        
    }
    // copy(){
    //     let that=this
    //     let width=Paint.imgStyle.initWidth;
    //     let height=Paint.imgStyle.initHeight;
    //     html2canvas(canvas, {
    //         // dpi: window.devicePixelRatio * 2,
    //         // scale: scale,
    //         backgroundColor:null,
    //         width: width,
    //         heigth: height,
    //         useCORS: true // 【重要】开启跨域配置
    //     }).then(function(canvas) {
    //         var url = canvas.toDataURL("image/png")
    //         that.sendPic(url)
    //     })
    // }
    

    home(){
        if(Paint.imgIndex){
            //跳回项目详情
            wx.miniProgram.redirectTo({url: `/pages/countSteel/main?type=back`});
        }else{
            //跳回一拍即点
            wx.miniProgram.switchTab({url:`/pages/pai/main?type=back`})
        }
    }

    sendPic(fullQuality){
        //上传图片并发回给小程序
        const _this=this
        $.ajax({
            type:'POST',
            url:`${domain}/api/file/uploadBase64Image`,
            data:{
                base_code:fullQuality
            },
            xhr: function(){ 
               var myXhr = $.ajaxSettings.xhr();          //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                if(myXhr.upload){            //绑定progress事件的回调函数
                    myXhr.upload.addEventListener('progress',_this.progressHandlingFunction, false);
                }    //xhr对象返回给jQuery使用
                return myXhr; 
              },
  
            success:function(data){
                console.log(Paint.imgIndex);
                _this.layerMessage(data.message);
                setTimeout(()=>{
                    if(Paint.imgIndex){
                        //跳回项目详情
                        wx.miniProgram.redirectTo({url: `/pages/countSteel/main?imgUrl=${data.data.img_url}&imgId=${data.data.id}&imgIndex=${Paint.imgIndex}`});
                    }else{
                        //跳回一拍即点
                        wx.miniProgram.postMessage({ 
                            data:{
                                imgUrl:data.data.img_url,
                                imgId:data.data.id
                                //  gameId:window.gameId
                        }}) ;
                        wx.miniProgram.switchTab({url:`/pages/pai/main`})
                        
                    }
                },500)
            },
            fail:function(err){
                _this.layerMessage(data.message);
                console.log(err)
            }
        })
    }
    progressHandlingFunction(e){
        if (e.lengthComputable) {        //e.loaded 上传大小
            //e.total 文件大小
            var percent = e.loaded/e.total*100;
            Paint.layerShow(`上传中...${Math.round(percent)}%`);
           
        }
    }

    layerShow(message){
        layerLoading.style.display='none';
        layerMessage.style.display='block';
        layerMessage.innerText=`${message}`;
        layer.style.display='flex';
    }
    layerDownload(message){
        //加载图片中
        layerLoading.style.display='none';
        layerMessage.style.display='block';
        layerMessage.innerText=`${message}`;
        layer.style.display='flex';
    }
    layerHide(){
        setTimeout(()=>{
            layerLoading.style.display='flex';
            layerMessage.style.display='none';
            layer.style.display='none';
        },500)
    }
    layerMessage(message){
        //弹出错误信息
        layerLoading.style.display='none';
        layerMessage.style.display='block';
        layerMessage.innerText=`${message}`;
        layer.style.display='flex';
        setTimeout(()=>{
            layer.style.display='none';
        },500)
    }
}



var penList_wrapper=document.querySelector('.penList_wrapper');
export class penBarPro{
    
    constructor(){
        this.init()
    }
    init(){
        penList_wrapper.addEventListener('touchend',e=>{
            const dom=e.target;
            const size=dom.getAttribute('data-size');

            
            console.log(dom,size)
            switch(size){
                case 'small' :penSize=5;this.selectItem(dom);break;
                case 'middle' :penSize=10;this.selectItem(dom);break;
                case 'large'    :penSize=15;this.selectItem(dom);break;
                case 'huge'  :penSize=20;this.selectItem(dom);break;
            }
        })
    }

    selectItem(item){
        //选中大小
        const children=penList_wrapper.children
        for(let j=0,length=children.length;j<length;j++){
            children[j].style.background='gray'
        }
        item.style.background='#000'
        console.log(children)
    }
}

var rubberList_wrapper=document.querySelector('.rubberList_wrapper');
export class rubberBarPro{
    
    constructor(){
        this.init()
    }
    init(){
        rubberList_wrapper.addEventListener('touchend',e=>{
            const dom=e.target;
            const size=dom.getAttribute('data-size');

            

            switch(size){
                case 'small' :rubberSize=5;this.selectItem(dom);break;
                case 'middle' :rubberSize=10;this.selectItem(dom);break;
                case 'large'    :rubberSize=15;this.selectItem(dom);break;
                case 'huge'  :rubberSize=20;this.selectItem(dom);break;
            }
        })
    }

    selectItem(item){
        //选中大小
        const children=rubberList_wrapper.children
        for(let j=0,length=children.length;j<length;j++){
            children[j].style.background='gray'
        }
        item.style.background='#000'
    }
}

export default{
    paintPro,
    penBarPro,
    rubberBarPro
}